<template>
    <div class="card-container">
        <div class="car" @click="navigateToCardDetail">
            <div class="card-wrapper">
                <Card
                    image="https://www.nasachina.cn/wp-content/uploads/2024/05/webb-stsci-01htfz25q530vpxwr5kazckyeh-4k.webp"
                    title="早期宇宙中活跃形成的星系以冷气体为食" />
            </div>
        </div>
        <div class="car" @click="sss">
            <div class="card-wrapper">
                <Card
                    image="https://www.nasachina.cn/wp-content/uploads/2024/03/1-pia26246-curiosity-arrives-at-upper-gediz-vallis.webp"
                    title="NASA的好奇号探测器正在寻找有关火星古代水源的新线索" />
            </div>
        </div>
        <div class="car" @click="qqq">
            <div class="card-wrapper">
                <Card image="https://www.nasachina.cn/wp-content/uploads/2024/03/1-dimorphos-before-impact-dart.webp"
                    title="小行星的轨道和形状在DART撞击后发生了变化" />
            </div>
        </div>
        <div class="car" @click="eee">
            <div class="card-wrapper">
                <Card image="https://www.nasachina.cn/wp-content/uploads/2024/05/1b-pia26276-fig-a-the-infrared-face-of-the-andromeda-galaxy.webp"
                    title="NASA的图像有助于解释大质量黑洞的进食习惯" />
            </div>
        </div>
        <div class="car" @click="ppp">
            <div class="card-wrapper">
                <Card image="https://www.nasachina.cn/wp-content/uploads/2024/04/hubble-34th-littledumbell-sm-stsci-01htddrc7nr68q120setwhmsaq.webp"
                    title="哈勃望远镜观测小哑铃星云庆祝34周年" />
            </div>
        </div>
        <div class="car" @click="mmm">
            <div class="card-wrapper">
                <Card image="https://www.nasachina.cn/wp-content/uploads/2024/02/discoalert.webp"
                    title="发光云层表明发生了宇宙碰撞" />
            </div>
        </div>
    </div>
</template>  
    
<script>
import Card from './Card.vue';

export default {
    name: 'ParentComponent',
    components: {
        Card,

    },
    methods: {
        navigateToCardDetail() {
            this.$router.push({ name: 'CardDetail' });
        },
        sss() {
            this.$router.push({ name: 'ss' });
        },
        qqq() {
            this.$router.push({ name: 'qq' });
        },
        eee() {
            this.$router.push({ name: 'ee' });
        },
        ppp() {
            this.$router.push({ name: 'pp' });
        },
        mmm(){
            this.$router.push({ name: 'mm' });
        }

    }

};

</script>
<style scoped>  .card-container {
      display: flex;
      flex-wrap: wrap;
      margin-left: 50px;
      justify-content: flex-start;
      /* 水平方向从容器起始位置开始排列 */
      gap: 150px;
      /* 卡片之间的水平间隙 */
      padding: 20px;
      /* 容器内边距 */

  }

  .card-wrapper {
      flex-basis: calc(25% - 15px);
      /* 每个卡片占据行宽度的四分之一，减去间隙 */
      margin-bottom: 50px;
      /* 卡片之间的垂直间隙 */
      font-family: '隶书', LiSu;

  }
</style>